// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'


//引入vuex 并且把vuex注册为Vue的插件
import Vuex from "vuex";
Vue.use(Vuex)
//创建仓库 并 注册
const store = new Vuex.Store({
    //使用vuex的严格模式
    strict: true,
    //store的所有配置项都会转绑给store
    //数据
    state:{
      count:1000
    },
    //操作数据的工具
    mutations:{
      //所有的mutation函数接受的一个参数就是state
      //在mutation只能不要出现异步代码 mutation中对state数据的修改都应该是同步的
      asyncAdd(state,{msg}){
        console.log(msg,"mutations")
        state.count+=2;
      }
    },

    /*在没有vuex环境的项目中;请求的发送一般在生命周期钩子中
      最早是created钩子中发
      如果拿回来的数据要参与dom操作;那会在mounted钩子中发
          发完请求后 拿到数据 在钩子中可以直接修改掉data中的数据

    有了vuex环境;在组件上转发一个action;在action中进行请求的发送
          发完请求后 拿到数据 将数据传递给mutation 在mutation修改state中的数据*/
    actions:{
      //此处的{msg}写法是es6解构赋值的语法
      asyncAdd(store,{msg}){
        console.log(msg,"actions")
        setTimeout(()=>{
          //此处的{msg}写法是es6对象的简写形式
          store.commit("asyncAdd",{msg})
        },2000)
      }
    }
})

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  store //注册仓库
})
